<script src="@/js/gongju/liuyaopaipan.js"></script>

<template>
  <div id="app" class="liuyaopaipan">
    <div class="margins">
      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-color-wand" />
              工具
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              六爻起卦
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 更多工具 -->
        <div class="prediction">
          更多工具：
          <span class="spacing">
            <router-link to="/gongju/bazi">
              八字排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/qimendunjia">
              奇门排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/meihuayishu">
              梅花易数起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span>
            <router-link to="/gongju/PaiPan">
              紫微斗数排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
        </div>
        <div class="morePrediction">
          <el-dropdown :hide-on-click="true">
            <span class="el-dropdown-link">
              更多工具
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  ><router-link to="/gongju/bazi">
                    八字排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="/gongju/qimendunjia">
                    奇门排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item
                  ><router-link to="/gongju/meihuayishu">
                    梅花易数起卦
                    <Icon type="ios-open-outline" />
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="/gongju/PaiPan">
                    紫微斗数排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div v-if="!dataDStatus">
        <el-empty description="努力加载中">
          <Button
            v-if="reLoadingButton"
            @click="starts(true)"
            class="reLoading-button"
            >重新加载</Button
          >
          <Button v-else loading class="reLoading-button">加载中...</Button>
        </el-empty>
      </div>
      <div v-if="dataDStatus">
        <!-- ★未排盘 -->
        <div v-show="!dataStatus">
          <el-row :gutter="5">
            <!-- 默认排盘数据 -->
            <el-col :span="14">
              <!-- 本卦 -->
              <el-card shadow="always" class="gua-default">
                <div class="gua">
                  <div class="title">
                    本卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.benGua }}
                  </div>
                  <div class="divider">
                    <el-divider border-style="dashed" />
                  </div>
                  <div class="naming">
                    <span class="ym">爻名</span>
                    <span class="gx">卦象</span>
                    <span class="sy">世应</span>
                    <span class="lq">六亲</span>
                    <span class="gz">干支</span>
                    <span class="wx">五行</span>
                    <span class="ls">六神</span>
                    <span class="yc">爻辞</span>
                  </div>
                  <div class="yaoming" v-if="dataD.benGuaLiuYaoName">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.benGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="guaxiang" v-if="dataD.benGuaAs">
                    <div>{{ dataD.benGuaAs }}</div>
                  </div>
                  <div class="marki" v-if="dataD.liuYaoYaoXiangMark">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.liuYaoYaoXiangMark[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="shiying" v-if="dataD.benGuaLiuYaoShiYing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.benGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liuqin" v-if="dataD.benGuaLiuYaoLiuQin">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.benGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="ganzhi" v-if="dataD.benGuaLiuYaoGanZhi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.benGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="wuxing" v-if="dataD.benGuaLiuYaoWuXing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.benGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liushen" v-if="dataD.benGuaLiuYaoLiuShen">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.benGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="yaoci" v-if="dataD.benGuaLiuYaoYaoCi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      <b>{{
                        dataD.benGuaLiuYaoYaoCi[sixGuaIndex[index - 1]]
                      }}</b>
                    </div>
                  </div>
                </div>
              </el-card>

              <!-- 变卦 -->
              <el-card shadow="always" class="gua-default">
                <div class="gua">
                  <div class="title">
                    变卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.bianGua }}
                  </div>
                  <div class="divider">
                    <el-divider border-style="dashed" />
                  </div>
                  <div class="naming">
                    <span class="ym">爻名</span>
                    <span class="gx">卦象</span>
                    <span class="sy">世应</span>
                    <span class="lq">六亲</span>
                    <span class="gz">干支</span>
                    <span class="wx">五行</span>
                    <span class="ls">六神</span>
                    <span class="yc">爻辞</span>
                  </div>
                  <div class="yaoming" v-if="dataD.bianGuaLiuYaoName">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="guaxiang" v-if="dataD.bianGuaAs">
                    <div>{{ dataD.bianGuaAs }}</div>
                  </div>
                  <div class="marki">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                  <div class="shiying" v-if="dataD.bianGuaLiuYaoShiYing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liuqin" v-if="dataD.bianGuaLiuYaoLiuQin">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="ganzhi" v-if="dataD.bianGuaLiuYaoGanZhi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="wuxing" v-if="dataD.bianGuaLiuYaoWuXing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liushen" v-if="dataD.bianGuaLiuYaoLiuShen">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="yaoci" v-if="dataD.bianGuaLiuYaoYaoCi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      <b>{{
                        dataD.bianGuaLiuYaoYaoCi[sixGuaIndex[index - 1]]
                      }}</b>
                    </div>
                  </div>
                </div>
              </el-card>

              <!-- 互卦 -->
              <el-card shadow="always" class="gua-default">
                <div class="gua">
                  <div class="title">
                    互卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.huGua }}
                  </div>
                  <div class="divider">
                    <el-divider border-style="dashed" />
                  </div>
                  <div class="naming">
                    <span class="ym">爻名</span>
                    <span class="gx">卦象</span>
                    <span class="sy">世应</span>
                    <span class="lq">六亲</span>
                    <span class="gz">干支</span>
                    <span class="wx">五行</span>
                    <span class="ls">六神</span>
                    <span class="yc">爻辞</span>
                  </div>
                  <div class="yaoming" v-if="dataD.huGuaLiuYaoName">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="guaxiang" v-if="dataD.huGuaAs">
                    <div>{{ dataD.huGuaAs }}</div>
                  </div>
                  <div class="marki">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                  <div class="shiying" v-if="dataD.huGuaLiuYaoShiYing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liuqin" v-if="dataD.huGuaLiuYaoLiuQin">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="ganzhi" v-if="dataD.huGuaLiuYaoGanZhi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="wuxing" v-if="dataD.huGuaLiuYaoWuXing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liushen" v-if="dataD.huGuaLiuYaoLiuShen">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="yaoci" v-if="dataD.huGuaLiuYaoYaoCi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      <b>{{
                        dataD.huGuaLiuYaoYaoCi[sixGuaIndex[index - 1]]
                      }}</b>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>

            <!-- 选项 -->
            <el-col :span="10">
              <el-card shadow="never" class="option">
                <div>
                  <input
                    placeholder="请输入姓名（选填）"
                    v-model="name"
                    maxlength="30"
                    class="name"
                  />
                  <el-radio
                    v-model="sex"
                    v-for="item in sexOptions"
                    :label="item.label"
                    :key="item"
                    class="sex"
                  >
                    {{ item.value }}
                  </el-radio>
                </div>
                <div>
                  <input
                    placeholder="请输入占事（选填）"
                    v-model="occupy"
                    maxlength="30"
                    class="occupy"
                  />
                  <el-checkbox
                    class="leap-month"
                    :disabled="dateType !== 1"
                    v-model="leapMonth"
                  >
                    闰月
                  </el-checkbox>
                </div>
                <div class="date">
                  <el-date-picker
                    :clearable="false"
                    v-model="date"
                    type="datetime"
                    format="YYYY-MM-DD HH:mm:ss"
                    :disabled="!dateStatus"
                    placeholder="请选择日期"
                    style="width: 50%"
                  />
                  <el-radio-group
                    class="date-type"
                    v-model="dateType"
                    :disabled="!dateStatus"
                  >
                    <el-radio-button
                      v-for="item in dateTypeOptions"
                      :label="item.label"
                      :key="item"
                    >
                      {{ item.value }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
                <!-- <div>
                  <el-checkbox v-model="trueSolar"> 真太阳时 </el-checkbox>
                  <span class="address" v-show="trueSolar">
                    地区：
                    <City class="city" v-model="address" show-suffix @on-change="getAddressName" />
                    <el-tooltip placement="top">
                      <template #content>
                        默认为北京市，依然按照标准时间排盘；
                        <br />
                        若选择其他地区，则按真太阳时排盘。
                      </template>
<Icon type="md-information-circle" />
</el-tooltip>
</span>
</div> -->
                <div class="pai_pan">
                  <div class="title">起卦模式：</div>
                  <el-select class="mode" v-model="qiGuaMode">
                    <el-option
                      v-for="item in qiGuaModeOptions"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span
                        v-if="item.value === 0"
                        style="
                          float: right;
                          color: #8492a6;
                          font-size: 12px;
                          margin-right: -15px;
                        "
                      >
                        <Icon type="md-arrow-dropleft-circle" /> 默认
                      </span>
                    </el-option>
                  </el-select>
                  <el-tooltip placement="top">
                    <template #content>
                      <b>日期起卦：</b>使用日期进行起卦。<br />
                      <b>自动起卦：</b>随机生成六爻进行起卦。<br />
                      <b>手动起卦：</b>手动指定六爻进行起卦。<br /><br />
                      <div style="color: #ffbf00">
                        <Icon type="md-checkmark-circle-outline" />
                        以上方式在业界均持有赞否两论，请善用者用之。
                      </div>
                    </template>
                    <Icon class="tip" type="md-information-circle" />
                  </el-tooltip>
                </div>

                <div v-show="qiGuaMode === 2" class="liuyao">
                  <div style="">
                    <div class="title">上爻：</div>
                    <el-select class="yaowei" v-model="liuYao" size="small">
                      <el-option
                        v-for="item in yaoOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          v-if="item.value === 0"
                          style="
                            float: right;
                            color: #8492a6;
                            font-size: 12px;
                            margin-right: -15px;
                          "
                        >
                          <Icon type="md-arrow-dropleft-circle" /> 默认
                        </span>
                      </el-option>
                    </el-select>
                    <span v-if="liuYao === 0" class="shao">少阳</span>
                    <span v-if="liuYao === 1" class="shao">少阴</span>
                    <span v-if="liuYao === 2" class="lao">老阳</span>
                    <span v-if="liuYao === 3" class="lao">老阴</span>
                  </div>
                  <div>
                    <div class="title">五爻：</div>
                    <el-select class="yaowei" v-model="wuYao" size="small">
                      <el-option
                        v-for="item in yaoOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          v-if="item.value === 0"
                          style="
                            float: right;
                            color: #8492a6;
                            font-size: 12px;
                            margin-right: -15px;
                          "
                        >
                          <Icon type="md-arrow-dropleft-circle" /> 默认
                        </span>
                      </el-option>
                    </el-select>
                    <span v-if="wuYao === 0" class="shao">少阳</span>
                    <span v-if="wuYao === 1" class="shao">少阴</span>
                    <span v-if="wuYao === 2" class="lao">老阳</span>
                    <span v-if="wuYao === 3" class="lao">老阴</span>
                  </div>
                  <div>
                    <div class="title">四爻：</div>
                    <el-select class="yaowei" v-model="siYao" size="small">
                      <el-option
                        v-for="item in yaoOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          v-if="item.value === 0"
                          style="
                            float: right;
                            color: #8492a6;
                            font-size: 12px;
                            margin-right: -15px;
                          "
                        >
                          <Icon type="md-arrow-dropleft-circle" /> 默认
                        </span>
                      </el-option>
                    </el-select>
                    <span v-if="siYao === 0" class="shao">少阳</span>
                    <span v-if="siYao === 1" class="shao">少阴</span>
                    <span v-if="siYao === 2" class="lao">老阳</span>
                    <span v-if="siYao === 3" class="lao">老阴</span>
                  </div>
                  <div>
                    <div class="title">三爻：</div>
                    <el-select class="yaowei" v-model="sanYao" size="small">
                      <el-option
                        v-for="item in yaoOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          v-if="item.value === 0"
                          style="
                            float: right;
                            color: #8492a6;
                            font-size: 12px;
                            margin-right: -15px;
                          "
                        >
                          <Icon type="md-arrow-dropleft-circle" /> 默认
                        </span>
                      </el-option>
                    </el-select>
                    <span v-if="sanYao === 0" class="shao">少阳</span>
                    <span v-if="sanYao === 1" class="shao">少阴</span>
                    <span v-if="sanYao === 2" class="lao">老阳</span>
                    <span v-if="sanYao === 3" class="lao">老阴</span>
                  </div>
                  <div class="pt-36">
                    <div class="title">二爻：</div>
                    <el-select class="yaowei" v-model="erYao" size="small">
                      <el-option
                        v-for="item in yaoOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          v-if="item.value === 0"
                          style="
                            float: right;
                            color: #8492a6;
                            font-size: 12px;
                            margin-right: -15px;
                          "
                        >
                          <Icon type="md-arrow-dropleft-circle" /> 默认
                        </span>
                      </el-option>
                    </el-select>
                    <span v-if="erYao === 0" class="shao">少阳</span>
                    <span v-if="erYao === 1" class="shao">少阴</span>
                    <span v-if="erYao === 2" class="lao">老阳</span>
                    <span v-if="erYao === 3" class="lao">老阴</span>
                  </div>
                  <div>
                    <div class="title">一爻：</div>
                    <el-select class="yaowei" v-model="yiYao" size="small">
                      <el-option
                        v-for="item in yaoOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          v-if="item.value === 0"
                          style="
                            float: right;
                            color: #8492a6;
                            font-size: 12px;
                            margin-right: -15px;
                          "
                        >
                          <Icon type="md-arrow-dropleft-circle" /> 默认
                        </span>
                      </el-option>
                    </el-select>
                    <span v-if="yiYao === 0" class="shao">少阳</span>
                    <span v-if="yiYao === 1" class="shao">少阴</span>
                    <span v-if="yiYao === 2" class="lao">老阳</span>
                    <span v-if="yiYao === 3" class="lao">老阴</span>
                  </div>
                </div>

                <div class="res">
                  <div class="resetting" @click="resetting">
                    <Icon type="md-sync" />
                    <span>重置</span>
                  </div>
                  <div
                    class="senior"
                    @click="seniorDialog = true"
                    v-show="dateStatus"
                  >
                    <Icon type="ios-settings" />
                    <span>高级选项</span>
                  </div>
                </div>
                <div>
                  <Button
                    v-if="!startsButton"
                    style="width: 100%"
                    class="starts"
                    @click="starts(false)"
                    >开始起卦</Button
                  >
                  <Button v-else loading style="width: 100%" class="starts"
                    >起卦中...</Button
                  >
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- ★已排盘 -->
        <div v-show="dataStatus">
          <div class="return" @click="dataStatus = false">返回起卦</div>

          <el-row :gutter="10">
            <!-- 基础 -->
            <el-col :span="12">
              <el-card shadow="always" class="foundation">
                <div class="divider1">
                  <el-divider><b>基础</b></el-divider>
                </div>
                <div class="jichu">
                  <div class="go1">
                    <span class="title">公历日期</span>
                    {{ data.solarStr }}
                  </div>
                  <div class="go2">
                    <span class="title">农历日期</span>
                    {{ data.lunarStr }}
                  </div>
                  <div class="go3">
                    <div class="left">
                      <span class="title">干支</span>
                      <span v-if="data.baZi">
                        {{ data.baZi.join("&nbsp;&nbsp;") }}
                      </span>
                    </div>
                    <div class="right">
                      <span class="title">五行</span>
                      <span v-if="data.baZiWuXing">
                        <span
                          v-for="index in data.baZiWuXing.length"
                          :key="index"
                        >
                          <span
                            v-html="WuXingColor(data.baZiWuXing[index - 1])"
                          ></span
                          >&nbsp;
                        </span>
                      </span>
                    </div>
                  </div>
                  <div class="go4">
                    <div class="left">
                      <span class="title">旬空</span>
                      <span v-if="data.baZiXunKong">
                        {{ data.baZiXunKong.join("&nbsp;&nbsp;") }}
                      </span>
                    </div>
                    <div class="right">
                      <span class="title">纳音</span>
                      <span v-if="data.baZiNaYin">
                        {{ data.baZiNaYin.join("&nbsp;&nbsp;") }}
                      </span>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>

            <!-- 神煞 -->
            <el-col :span="12">
              <el-card shadow="always" class="shensha">
                <div class="divider2">
                  <el-divider><b>神煞</b></el-divider>
                </div>
                <div class="go1-ss">
                  <div class="left-ss">
                    <span class="title">驿马</span>
                    {{ data.yiMa }}
                  </div>
                  <div class="center-ss">
                    <span class="title">天马</span>
                    {{ data.tianMa }}
                  </div>
                  <div class="right-ss">
                    <span class="title">咸池</span>
                    {{ data.xianChi }}
                  </div>
                </div>
                <div class="go2-ss">
                  <div class="left-ss">
                    <span class="title">皇恩</span>
                    {{ data.huangEn }}
                  </div>
                  <div class="center-ss">
                    <span class="title">天喜</span>
                    {{ data.tianXi }}
                  </div>
                  <div class="right-ss">
                    <span class="title">天医</span>
                    {{ data.tianYi }}
                  </div>
                </div>
                <div class="go1-ss">
                  <div class="left-ss">
                    <span class="title">文昌</span>
                    {{ data.wenChang }}
                  </div>
                  <div class="center-ss">
                    <span class="title">灾煞</span>
                    {{ data.zaiSha }}
                  </div>
                  <div class="right-ss">
                    <span class="title">劫煞</span>
                    {{ data.jieSha }}
                  </div>
                </div>
                <div class="go2-ss">
                  <div class="left-ss">
                    <span class="title">华盖</span>
                    <span v-if="null !== data.huaGai">{{ data.huaGai }}</span>
                    <span v-else class="null">暂无数据</span>
                  </div>
                  <div class="center-ss">
                    <span class="title">谋星</span>
                    {{ data.mouXing }}
                  </div>
                  <div class="right-ss">
                    <span class="title">将星</span>
                    <span v-if="null !== data.jiangXing">{{
                      data.jiangXing
                    }}</span>
                    <span v-else class="null">暂无数据</span>
                  </div>
                </div>
                <div class="go1-ss">
                  <div class="left-ss">
                    <span class="title">唐符国印</span>
                    {{ data.tangFuGuoYin }}
                  </div>
                  <div class="center-ss">
                    <span class="title">月德贵人</span>
                    <span v-if="null !== data.yueDeGuiRen">{{
                      data.yueDeGuiRen
                    }}</span>
                    <span v-else class="null">暂无数据</span>
                  </div>
                  <div class="right-ss">
                    <span class="title">天德贵人</span>
                    {{ data.tianDeGuiRen }}
                  </div>
                </div>
                <div class="go2-ss">
                  <div class="left-ss">
                    <span class="title">太极贵人</span>
                    <span v-if="null !== data.taiJiGuiRen">{{
                      data.taiJiGuiRen
                    }}</span>
                    <span v-else class="null">暂无数据</span>
                  </div>
                  <div class="center-ss">
                    <span class="title">天乙贵人</span>
                    {{ data.tianYiGuiRen }}
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 本卦 -->
          <el-card shadow="always" class="gua-default mt-10">
            <div class="gua">
              <div class="title">
                本卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.benGua }}
              </div>
              <div class="divider"><el-divider border-style="dashed" /></div>
              <div class="naming">
                <span class="ym">爻名</span>
                <span class="gx">卦象</span>
                <span class="sy">世应</span>
                <span class="lq">六亲</span>
                <span class="gz">干支</span>
                <span class="wx">五行</span>
                <span class="ls">六神</span>
                <span class="yc">爻辞</span>
              </div>
              <div class="yaoming" v-if="dataD.benGuaLiuYaoName">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  {{ dataD.benGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                </div>
              </div>
              <div class="guaxiang" v-if="dataD.benGuaAs">
                <div>{{ dataD.benGuaAs }}</div>
              </div>
              <div class="marki" v-if="dataD.liuYaoYaoXiangMark">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  {{ dataD.liuYaoYaoXiangMark[sixGuaIndex[index - 1]] }}
                </div>
              </div>
              <div class="shiying" v-if="dataD.benGuaLiuYaoShiYing">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  {{ dataD.benGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                </div>
              </div>
              <div class="liuqin" v-if="dataD.benGuaLiuYaoLiuQin">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  {{ dataD.benGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                </div>
              </div>
              <div class="ganzhi" v-if="dataD.benGuaLiuYaoGanZhi">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  {{ dataD.benGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                </div>
              </div>
              <div class="wuxing" v-if="dataD.benGuaLiuYaoWuXing">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  {{ dataD.benGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                </div>
              </div>
              <div class="liushen" v-if="dataD.benGuaLiuYaoLiuShen">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  {{ dataD.benGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                </div>
              </div>
              <div class="yaoci" v-if="dataD.benGuaLiuYaoYaoCi">
                <div v-for="index in sixGuaIndex.length" :key="index">
                  <b>{{ dataD.benGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 变卦、互卦 -->
          <el-row :gutter="10">
            <!-- 变卦 -->
            <el-col :span="12">
              <el-card shadow="always" class="gua-default">
                <div class="gua">
                  <div class="title">
                    变卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.bianGua }}
                  </div>
                  <div class="divider">
                    <el-divider border-style="dashed" />
                  </div>
                  <div class="naming">
                    <span class="ym">爻名</span>
                    <span class="gx">卦象</span>
                    <span class="sy">世应</span>
                    <span class="lq">六亲</span>
                    <span class="gz">干支</span>
                    <span class="wx">五行</span>
                    <span class="ls">六神</span>
                    <span class="yc">爻辞</span>
                  </div>
                  <div class="yaoming" v-if="dataD.bianGuaLiuYaoName">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="guaxiang" v-if="dataD.bianGuaAs">
                    <div>{{ dataD.bianGuaAs }}</div>
                  </div>
                  <div class="marki">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                  <div class="shiying" v-if="dataD.bianGuaLiuYaoShiYing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liuqin" v-if="dataD.bianGuaLiuYaoLiuQin">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="ganzhi" v-if="dataD.bianGuaLiuYaoGanZhi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="wuxing" v-if="dataD.bianGuaLiuYaoWuXing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liushen" v-if="dataD.bianGuaLiuYaoLiuShen">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.bianGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="yaoci" v-if="dataD.bianGuaLiuYaoYaoCi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      <b>{{
                        dataD.bianGuaLiuYaoYaoCi[sixGuaIndex[index - 1]]
                      }}</b>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>

            <!-- 互卦 -->
            <el-col :span="12">
              <el-card shadow="always" class="gua-default">
                <div class="gua">
                  <div class="title">
                    互卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.huGua }}
                  </div>
                  <div class="divider">
                    <el-divider border-style="dashed" />
                  </div>
                  <div class="naming">
                    <span class="ym">爻名</span>
                    <span class="gx">卦象</span>
                    <span class="sy">世应</span>
                    <span class="lq">六亲</span>
                    <span class="gz">干支</span>
                    <span class="wx">五行</span>
                    <span class="ls">六神</span>
                    <span class="yc">爻辞</span>
                  </div>
                  <div class="yaoming" v-if="dataD.huGuaLiuYaoName">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="guaxiang" v-if="dataD.huGuaAs">
                    <div>{{ dataD.huGuaAs }}</div>
                  </div>
                  <div class="marki">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                  <div class="shiying" v-if="dataD.huGuaLiuYaoShiYing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liuqin" v-if="dataD.huGuaLiuYaoLiuQin">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="ganzhi" v-if="dataD.huGuaLiuYaoGanZhi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="wuxing" v-if="dataD.huGuaLiuYaoWuXing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liushen" v-if="dataD.huGuaLiuYaoLiuShen">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.huGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="yaoci" v-if="dataD.huGuaLiuYaoYaoCi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      <b>{{
                        dataD.huGuaLiuYaoYaoCi[sixGuaIndex[index - 1]]
                      }}</b>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 错卦、综卦 -->
          <el-row :gutter="10">
            <!-- 错卦 -->
            <el-col :span="12">
              <el-card shadow="always" class="gua-default">
                <div class="gua">
                  <div class="title">
                    错卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.cuoGua }}
                  </div>
                  <div class="divider">
                    <el-divider border-style="dashed" />
                  </div>
                  <div class="naming">
                    <span class="ym">爻名</span>
                    <span class="gx">卦象</span>
                    <span class="sy">世应</span>
                    <span class="lq">六亲</span>
                    <span class="gz">干支</span>
                    <span class="wx">五行</span>
                    <span class="ls">六神</span>
                    <span class="yc">爻辞</span>
                  </div>
                  <div class="yaoming" v-if="dataD.cuoGuaLiuYaoName">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.cuoGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="guaxiang" v-if="dataD.cuoGuaAs">
                    <div>{{ dataD.cuoGuaAs }}</div>
                  </div>
                  <div class="marki">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                  <div class="shiying" v-if="dataD.cuoGuaLiuYaoShiYing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.cuoGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liuqin" v-if="dataD.cuoGuaLiuYaoLiuQin">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.cuoGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="ganzhi" v-if="dataD.cuoGuaLiuYaoGanZhi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.cuoGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="wuxing" v-if="dataD.cuoGuaLiuYaoWuXing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.cuoGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liushen" v-if="dataD.cuoGuaLiuYaoLiuShen">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.cuoGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="yaoci" v-if="dataD.cuoGuaLiuYaoYaoCi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      <b>{{
                        dataD.cuoGuaLiuYaoYaoCi[sixGuaIndex[index - 1]]
                      }}</b>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>

            <!-- 综卦 -->
            <el-col :span="12">
              <el-card shadow="always" class="gua-default">
                <div class="gua">
                  <div class="title">
                    综卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ dataD.zongGua }}
                  </div>
                  <div class="divider">
                    <el-divider border-style="dashed" />
                  </div>
                  <div class="naming">
                    <span class="ym">爻名</span>
                    <span class="gx">卦象</span>
                    <span class="sy">世应</span>
                    <span class="lq">六亲</span>
                    <span class="gz">干支</span>
                    <span class="wx">五行</span>
                    <span class="ls">六神</span>
                    <span class="yc">爻辞</span>
                  </div>
                  <div class="yaoming" v-if="dataD.zongGuaLiuYaoName">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.zongGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="guaxiang" v-if="dataD.zongGuaAs">
                    <div>{{ dataD.zongGuaAs }}</div>
                  </div>
                  <div class="marki">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                  <div class="shiying" v-if="dataD.zongGuaLiuYaoShiYing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.zongGuaLiuYaoShiYing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liuqin" v-if="dataD.zongGuaLiuYaoLiuQin">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.zongGuaLiuYaoLiuQin[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="ganzhi" v-if="dataD.zongGuaLiuYaoGanZhi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.zongGuaLiuYaoGanZhi[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="wuxing" v-if="dataD.zongGuaLiuYaoWuXing">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.zongGuaLiuYaoWuXing[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="liushen" v-if="dataD.zongGuaLiuYaoLiuShen">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      {{ dataD.zongGuaLiuYaoLiuShen[sixGuaIndex[index - 1]] }}
                    </div>
                  </div>
                  <div class="yaoci" v-if="dataD.zongGuaLiuYaoYaoCi">
                    <div v-for="index in sixGuaIndex.length" :key="index">
                      <b>{{
                        dataD.zongGuaLiuYaoYaoCi[sixGuaIndex[index - 1]]
                      }}</b>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 高级选项窗口 -->
    <el-dialog
      v-model="seniorDialog"
      width="500"
      :lock-scroll="false"
      style="border-radius: 26px"
      class="senior-dialog"
    >
      <template #header>
        <span class="header-senior">高级选项</span>
      </template>
      <el-card shadow="always" class="senior-card">
        <div class="t-senior">四柱选项</div>
        <div>
          年柱&nbsp;
          <el-select v-model="yearGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in yearGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 1"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          月柱&nbsp;
          <el-select v-model="monthGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in monthGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 1"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          日柱&nbsp;
          <el-select v-model="dayGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in dayGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 1"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          时柱&nbsp;
          <el-select v-model="hourGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in hourGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 0"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <Button
            @click="seniorDialog = false"
            style="width: 100%; border-radius: 10px"
          >
            确定
          </Button>
        </div>
      </template>
    </el-dialog>

    <!-- 四柱转日期弹窗 -->
    <el-dialog
      v-model="siZhuDialog"
      width="600"
      :lock-scroll="false"
      style="border-radius: 26px"
      class="sizhu-dialog"
    >
      <template #header>
        <span class="header-sizhu">四柱转日期</span>
      </template>
      <el-card shadow="always" class="sizhu-card">
        <div v-if="siZhuToDateTotal === 0">
          <div>
            年份范围：
            <input
              class="year-input mouse-text"
              placeholder="请输入起始年份"
              v-model="beginYear"
            />
            ~ 至今
            <a class="sizhu-res" @click="beginYear = 1900">重置</a>
          </div>
          <div>
            年柱：
            <el-select
              placement="right"
              v-model="yearGanZhi"
              style="width: 240px"
              placeholder="请选择年柱（年干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === yearGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            月柱：
            <el-select
              placement="right"
              v-model="monthGanZhi"
              style="width: 240px"
              placeholder="请选择月柱（月干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === monthGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            日柱：
            <el-select
              placement="right"
              v-model="dayGanZhi"
              style="width: 240px"
              placeholder="请选择日柱（日干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === dayGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            时柱：
            <el-select
              placement="right"
              v-model="hourGanZhi"
              style="width: 240px"
              placeholder="请选择时柱（时干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === hourGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </el-option>
            </el-select>
          </div>
        </div>
        <div v-else>
          <Table
            height="300"
            size="small"
            highlight-row
            :columns="siZhuToDateColumns"
            :data="siZhuToDate"
          >
            <template #action="{ row, index }">
              <Button type="primary" size="small" @click="setNewDate(row.solar)"
                >选择</Button
              >
            </template>
          </Table>
          <div class="count">
            从公元{{ beginYear2 }}年~至今共&nbsp;{{
              siZhuToDateTotal
            }}&nbsp;条日期 【{{
              yearGanZhi2 +
              "&nbsp;" +
              monthGanZhi2 +
              "&nbsp;" +
              dayGanZhi2 +
              "&nbsp;" +
              hourGanZhi2
            }}】
          </div>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <span v-if="siZhuToDateTotal === 0">
            <Button
              v-if="!siZhuButton"
              @click="getSiZhuToDate"
              style="width: 100%; border-radius: 10px"
              >获取日期</Button
            >
            <Button v-else loading style="width: 100%; border-radius: 10px"
              >日期获取中...</Button
            >
          </span>
          <Button
            v-else
            @click="siZhuToDateTotal = 0"
            style="width: 100%; border-radius: 10px"
          >
            重新获取
          </Button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less" src="@/css/gongju/liuyaopaipan.scss"></style>
<style scoped>
.ivu-table-wrapper {
  overflow-x: auto;
}
.jichu {
  width: -webkit-fill-available;
}

@media (max-width: 375px) {
  .jichu {
    width: max-content;
  }
  .liuyaopaipan .margins .foundation .go3 {
    width: max-content;
  }
  .liuyaopaipan .margins .foundation .go4 {
    width: max-content;
  }
  ::v-deep .ivu-table table {
    width: auto !important;
  }
  ::v-deep th .ivu-table-cell {
    white-space: pre;
  }

  .foundation {
    white-space: pre;
    overflow-x: auto;
  }
  .shensha {
    white-space: pre;
    overflow-x: auto;
  }
  .el-col-12 {
    max-width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-dialog {
    width: 88%;
  }
  .liuyaopaipan .margins .option {
    margin-bottom: 20px;
  }
  .liuyaopaipan .margins .option .name {
    width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .liuyaopaipan .margins .option .date .date-type {
    float: unset;
  }
  .liuyaopaipan .margins .option .pai_pan {
    margin-top: 10px;
  }
  .el-row {
    flex-direction: column;
  }
  .el-col-14 {
    flex: 1;
    max-width: 100%;
  }
  .el-col-10 {
    flex: 1;
    max-width: 100%;
  }
  ::v-deep .el-card__body {
    padding: 20px 10px;
  }
  ::v-deep .el-radio-button__inner {
    padding: 10px;
  }
}
@media (min-width: 375px) and (max-width: 576px) {
  .liuyaopaipan .margins .foundation .go3 {
    width: max-content;
  }
  .liuyaopaipan .margins .foundation .go4 {
    width: max-content;
  }
  ::v-deep .ivu-table table {
    width: auto !important;
  }
  ::v-deep th .ivu-table-cell {
    white-space: pre;
  }
  .foundation {
    white-space: pre;
    overflow-x: auto;
  }
  .shensha {
    white-space: pre;
    overflow-x: auto;
  }
  .el-col-12 {
    max-width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-dialog {
    width: 88%;
  }
  .liuyaopaipan .margins .option {
    margin-bottom: 20px;
  }
  .liuyaopaipan .margins .option .name {
    width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .liuyaopaipan .margins .option .date .date-type {
    float: unset;
  }
  .liuyaopaipan .margins .option .pai_pan {
    margin-top: 10px;
  }
  .el-row {
    flex-direction: column;
  }
  .el-col-14 {
    flex: 1;
    max-width: 100%;
  }
  .el-col-10 {
    flex: 1;
    max-width: 100%;
  }
  ::v-deep .el-card__body {
    padding: 20px 10px;
  }
  ::v-deep .el-radio-button__inner {
    padding: 10px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .foundation {
    white-space: pre;
    overflow-x: auto;
  }
  .shensha {
    white-space: pre;
    overflow-x: auto;
  }
  .el-col-12 {
    max-width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-dialog {
    width: 88%;
  }
  .liuyaopaipan .margins .option {
    margin-bottom: 20px;
  }
  .liuyaopaipan .margins .option .name {
    width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .liuyaopaipan .margins .option .date .date-type {
    float: unset;
  }
  .liuyaopaipan .margins .option .pai_pan {
    margin-top: 10px;
  }
  .el-row {
    flex-direction: column;
  }
  .el-col-14 {
    flex: 1;
    max-width: 100%;
  }
  .el-col-10 {
    flex: 1;
    max-width: 100%;
  }
  ::v-deep .el-card__body {
    padding: 20px 10px;
  }
  ::v-deep .el-radio-button__inner {
    padding: 10px;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .foundation {
    white-space: pre;
    overflow-x: auto;
  }
  .shensha {
    white-space: pre;
    overflow-x: auto;
  }
  .el-col-12 {
    max-width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-dialog {
    width: 88%;
  }
  .liuyaopaipan .margins .option {
    margin-bottom: 20px;
  }
  .liuyaopaipan .margins .option .name {
    width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .liuyaopaipan .margins .option .date .date-type {
    float: unset;
  }
  .liuyaopaipan .margins .option .pai_pan {
    margin-top: 10px;
  }
  .el-row {
    flex-direction: column;
  }
  .el-col-14 {
    flex: 1;
    max-width: 100%;
  }
  .el-col-10 {
    flex: 1;
    max-width: 100%;
  }
  ::v-deep .el-card__body {
    padding: 20px 10px;
  }
  ::v-deep .el-radio-button__inner {
    padding: 10px;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .foundation {
    white-space: pre;
    overflow-x: auto;
  }
  .shensha {
    white-space: pre;
    overflow-x: auto;
  }
  .el-col-12 {
    max-width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-dialog {
    width: 88%;
  }
  .liuyaopaipan .margins .option {
    margin-bottom: 20px;
  }
  .liuyaopaipan .margins .option .name {
    width: 100%;
    margin-bottom: 10px;
  }
  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .liuyaopaipan .margins .option .date .date-type {
    float: unset;
  }
  .liuyaopaipan .margins .option .pai_pan {
    margin-top: 10px;
  }
  .el-row {
    flex-direction: column;
  }
  .el-col-14 {
    flex: 1;
    max-width: 100%;
  }
  .el-col-10 {
    flex: 1;
    max-width: 100%;
  }
  ::v-deep .el-card__body {
    padding: 20px 10px;
  }
  ::v-deep .el-radio-button__inner {
    padding: 10px;
  }
}
@media (min-width: 1200px) {
  .foundation {
    white-space: pre;
    overflow-x: auto;
  }
  .shensha {
    white-space: pre;
    overflow-x: auto;
  }
}
</style>
